import { useState } from 'react'
import { Select } from 'antd'
import IconFont from '@/components/IconFont'

const { Option } = Select

const SelectEntry = (props) => {
  const { size = 'small', options, ...opt } = props
  const [open, setOpen] = useState(false)

  return (
    <Select
      {...opt}
      open={open}
      onDropdownVisibleChange={(open) => setOpen(open)}
      size={size}
      dropdownClassName="bi-core-dropdown"
      suffixIcon={
        <IconFont
          className="icon-color-base"
          type="icon-drop-down"
          onClick={() => setOpen(!open)}
        />
      }
    >
      {options.map(({ label, icon, value }) => (
        <Option key={value} value={value}>
          {label}
          {icon && <IconFont className="icon-color-base" type={icon} />}
        </Option>
      ))}
    </Select>
  )
}

export default SelectEntry
